<template>
    <div class="menu-rights">
        <div class="menu-rights-header">
            <div class="tips">请勾选该角色可使用的菜单功能权限，子角色权限不可超越上级角色权限。</div>
            <div class="btn-wrap">
                <el-button type="primary" v-if="!editState" @click="editState = !editState">编辑</el-button>
                <el-button v-if="editState"  @click="editState = !editState">取消</el-button>
                <el-button type="primary" v-if="editState" @click="save">保存</el-button>
            </div>
        </div>
        <div class="menu-rights-body">
            <div class="gzg-rights-table">
                <div class="gzg-rights-table-header">
                    <div class="gzg-rights-table-col" style="width:120px">
                        <el-checkbox :disabled="!editState"
                                     @change="allCheckboxChange"
                                     :indeterminate="params.all_indeterminate">一级菜单</el-checkbox>
                    </div>
                    <div class="gzg-rights-table-col" style="width:164px">
                        <span>二级菜单二级菜单</span>
                    </div>
                    <!-- <div class="gzg-rights-table-col" style="width:164px">
                        <span>三级菜单二级菜单</span>
                    </div> -->
                    <div class="gzg-rights-table-col" style="width:0;flex:1">
                        <span>功能点</span>
                    </div>
                </div>
                <div class="gzg-rights-table-body">
                    <div class="gzg-rights-table-row" v-for="(item, index) in list.data" :key="index">
                        <div class="gzg-rights-table-first-col" style="width:120px">
                            <el-checkbox :disabled="!editState"
                                         :indeterminate="item.indeterminate"
                                         @change="$event => { firstCheckboxChange($event, index) }"
                                         v-model="item.is_select">{{item.res_name}}</el-checkbox>
                        </div>
                        <div class="column" style="flex:1;width:0">
                            <template v-if="item.child_list">
                                <div class="gzg-rights-table-second-col" v-for="(second, secondIndex) in item.child_list" :key="second.id">
                                    <div class="gzg-rights-table-second-container">
                                        <el-checkbox :disabled="!editState"
                                                     @change="$event => { secondCheckboxChange($event, index, secondIndex)}"
                                                     v-model="second.is_select">{{second.res_name}}</el-checkbox>
                                    </div>
                                    <div class="column" style="flex:1;width:0">
                                        <template v-if="second.action_list">
                                            <template v-if="second.action_list[0].category === 0">
                                                <div class="gzg-rights-table-third-col" v-for="(third, thirdIndex) in second.action_list" :key="third.id">
                                                    <div class="gzg-rights-table-third-container">
                                                        <el-checkbox :disabled="!editState"
                                                                     @change="$event => { thirdCheckboxChange($event, index, secondIndex, thirdIndex) }"
                                                                     v-model="third.is_select">{{third.action_name}}</el-checkbox>
                                                    </div>
                                                    <div class="gzg-rights-table-fourth">
                                                        <el-checkbox v-for="(fourth) in third.action_list" 
                                                                     v-model="fourth.is_select"
                                                                     :disabled="!editState"
                                                                     :key="fourth.id">{{fourth.action_name}}</el-checkbox>
                                                    </div>
                                                </div>
                                            </template>
                                            <template v-else>
                                                <div class="gzg-rights-table-third-col">
                                                    <!-- <div class="gzg-rights-table-third-container"></div> -->
                                                    <div class="gzg-rights-table-fourth">
                                                        <el-checkbox v-for="(third) in second.action_list" 
                                                                     :key="third.id"
                                                                     v-model="third.is_select"
                                                                     :disabled="!editState">{{third.action_name}}</el-checkbox>
                                                    </div>
                                                </div>
                                            </template>
                                            
                                        </template>
                                        <template v-else>
                                            <div class="gzg-rights-table-third-col">
                                                <!-- <div class="gzg-rights-table-third-container"></div> -->
                                                <div class="gzg-rights-table-fourth"></div>
                                            </div>
                                        </template>
                                    </div>
                               
                                </div>
                            </template>
                            <template v-else>
                                <div class="gzg-rights-table-second-col">
                                    <div class="gzg-rights-table-second-container">
                                    </div>
                                    <div class="column" style="flex:1;width:0">
                                        <div class="gzg-rights-table-third-col">
                                            <div class="gzg-rights-table-third-container"></div>
                                            <div class="gzg-rights-table-fourth"></div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch} from 'vue'
import { ElMessage } from 'element-plus'

import { getMenuAndFnByRole,setRole } from 'services/setting'

const editState = ref(false)
const list = reactive({
    data:<any>[]
})

const params = reactive({
    all_indeterminate:false
})

const props = defineProps<{
    role_id: number | string | undefined,
   
}>();

const getData = (role_id:any) => {
    getMenuAndFnByRole({role_id:role_id}).then((res:any) => {
      console.log(res, 'menu')  
      list.data = res.items;
    })
}

const getSelectedIds = (data:any, isAction:boolean) => {
    let list: number[] = []

    data.forEach((item:any, index:number) => {
        if (item.is_select && isAction) {
            list.push(item.id)
        }

        if (item.child_list) {
            list = list.concat(getSelectedIds(item.child_list, false))
        }

        if (item.action_list) {
            list = list.concat(getSelectedIds(item.action_list, true))
        }
    })

    return list;
}

const save = () => {
    let ids =  getSelectedIds(list.data, false)
    console.log(ids)
    setRole({
        role_id: props.role_id || 0,
        action_ids: ids
    }).then((res:any) => {
        editState.value = false
        ElMessage.success('设置成功')
    })
}

const allCheckboxChange = (val:any) => {
    setCheckboxState(list.data, val);
}

const firstCheckboxChange = (val:any, index:number) => {
    let data:any = list.data[index]
    if (data.children) {
        setCheckboxState(data.children, val);

    }
}

const secondCheckboxChange = (val:any, firstIndex:number, secondIndex:number) => {
    let first:any = list.data[firstIndex]

    let second:any = first.child_list[secondIndex]
    if (second.action_list) {
        setCheckboxState(second.action_list, val);
    }
}

const thirdCheckboxChange = (val:any, firstIndex:number, secondIndex:number, thirdIndex: number) => {
    let first:any = list.data[firstIndex]
    let second:any = first.child_list[secondIndex]
    let third:any = second.action_list[thirdIndex]

    if (third.children) {
        setCheckboxState(third.children, val);
    }
}

const setCheckboxState = (data:any,state:boolean) => {
    data.forEach((item:any, index:number) => {
        item.is_select = state
        if (item.children) {
            setCheckboxState(item.children, state);
        }
    })
}

watch(() => props.role_id, (val) => {
    if (val) {
        getData(val)
    }
},{
    immediate:true
})

</script>
<style lang="scss">
.menu-rights{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .menu-rights-header{
        display: flex;
        margin-bottom: 16px;

        .tips{
            flex: 1;
            width: 0;
            font-size: 14px;
            line-height: 22px;
            color: #909399;
        }
        .btn-wrap{
            margin-left: 24px;
        }
    }

    .menu-rights-body{
        flex: 1;
        height: 0;

        .gzg-rights-table{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;

            .gzg-rights-table-header{
                height: 48px;
                width: 100%;
                background-color: #F5F7FA;
                display: flex;

                .gzg-rights-table-col{
                    border-right: 1px solid #EBEEF5;
                    font-size: 14px;
                    color: #909399;

                    .el-checkbox__label{
                        color: #909399;

                    }

                    &:last-child{
                        border-right: none;
                    }
                }
            }

            .gzg-rights-table-body{
                flex: 1;
                height: 0;
                overflow-y: scroll;

                .column{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                }

                .gzg-rights-table-first-col{
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    padding: 0 16px;
                    border-right: 1px solid #F2F5FC;
                    border-bottom: 1px solid #F2F5FC;
                }

                .gzg-rights-table-third-col,
                .gzg-rights-table-second-col{
                    display: flex;
                    width: 100%;
                    
                    .gzg-rights-table-third-container,
                    .gzg-rights-table-second-container{
                        width:164px;
                        display: flex;
                        align-items: center;
                        box-sizing: border-box;
                        padding: 0 16px;
                        border-right: 1px solid #F2F5FC;
                        border-bottom: 1px solid #F2F5FC;
                    }
                }

                .gzg-rights-table-fourth{
                    flex:1;
                    width:0;
                    min-height: 50px;
                    border-bottom: 1px solid #F2F5FC;
                    box-sizing: border-box;
                    padding: 0 12px;

                    .el-checkbox{
                        height: 50px;
                    }
                }

            }

            .gzg-rights-table-row{
                display: flex;

                &:nth-child(even){
                    background-color: #FAFCFF;
                }
            }

            .gzg-rights-table-col{
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding:0 16px;                   
            }
        }
    }
}
</style>